<template>

  <div class="app-container">


    <el-form label-width="120px">

        <el-form-item label="名称">
            <el-input v-model="crmBanner.title" placeholder=" 示例：test"/>
        </el-form-item>

        <el-form-item label="链接地址">
            <el-input v-model="crmBanner.linkUrl" placeholder=" 示例：/course"/>
        </el-form-item>


        <el-form-item label="排序">
            <el-input-number :min="0" v-model="crmBanner.sort" controls-position="right" placeholder="排序"/>
        </el-form-item>

        <el-form-item label="图片">
            <!-- show-file-list:显示文件列表
                  on-success:上传成功后的方法
                  before-upload:上传之前的方法 -->
            <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :action="BASE_API+'/eduoss/fileoss'"
                class="avatar-uploader">
                <img :src="crmBanner.imageUrl">
            </el-upload>

        </el-form-item>


        <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import banner from '@/api/edu/banner'
import Tinymce from '@/components/Tinymce'//引用组件

export default {
   components:{Tinymce},//声明组件
    data(){
        return {
            saveBtnDisabled:false,
            crmBanner:{
                sort:0,
                imageUrl:'https://guli-edu-100701.oss-cn-qingdao.aliyuncs.com/default/defaultCover.png'
            },
           BASE_API:process.env.BASE_API,//接口api地址
        }
    },
    created(){
        this.init()
    },
    watch: {//监听，写法固定
    $route(to, from) {//路由的变化方式，路由发生变化，这个方法就会执行
      console.log('watch $route')
      this.init()
    }
  },
    methods:{
        init(){
            if(this.$route.params&&this.$route.params.id){
                this.getBannerById(this.$route.params.id)
            }else{
                this.crmBanner={
                    sort:0,
                    imageUrl:'https://guli-edu-100701.oss-cn-qingdao.aliyuncs.com/default/defaultCover.png'
                }
            }
        },
        //修改
        saveOrUpdate(){
            if(this.crmBanner.id){
                this.updateBanner()
            }else{
                this.addBanner()
            }
        },
        updateBanner(){
            banner.updateBanner(this.crmBanner)
            .then(()=>{
                this.$message({
                    type:'success',
                    message:'修改成功'
                })
                this.$router.push({path:'/banner/list'})
            })
        },
        //根据id
        getBannerById(id){
            banner.getBanner(id)
            .then(response=>{
                this.crmBanner=response.data.banner
            })
        },
        //增
        addBanner(){
            banner.addBanner(this.crmBanner)
            .then(()=>{
                this.$message({
                    type:'success',
                    message:'添加成功'
                })
                this.$router.push({path:'/banner/list'})
            })
        },
       //上传封面成功调用的方法 res:response  参数都是框架自动传递过来的
       handleAvatarSuccess(res,file){
           this.crmBanner.imageUrl=res.data.url

       },
       //上传之前的方法:规定上传图片的类型和大小 参数都是框架自动传递过来的
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg'
            const isPng = file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG&&!isPng) {
                this.$message.error('上传图片只能是 JPG或Png 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },

    }
}
</script>